<template>
  <view class="result-container">
    <!-- 顶部返回栏 -->
    <view class="result-header">
      <view class="back-btn" @tap="goBack">
        <uni-icons type="left" size="24" color="#3b82f6"></uni-icons>
      </view>
      <view class="result-title">AI 行程结果</view>
    </view>

    <!-- 行程结果展示区域 -->
    <view class="result-content">
      <view class="result-item">
        <view class="item-title">行程名称</view>
        <view class="item-description">{{ travelPlan.name }}</view>
      </view>
      <view class="result-item">
        <view class="item-title">出发城市</view>
        <view class="item-description">{{ travelPlan.departure_city }}</view>
      </view>
      <view class="result-item">
        <view class="item-title">目的城市</view>
        <view class="item-description">{{ travelPlan.destination_city }}</view>
      </view>
      <view class="result-item">
        <view class="item-title">旅行天数</view>
        <view class="item-description">{{ travelPlan.duration_days }} 天</view>
      </view>
      <view class="result-item">
        <view class="item-title">人均预算</view>
        <view class="item-description">{{ travelPlan.budget }} 元</view>
      </view>
      <view class="result-item">
        <view class="item-title">旅行方式</view>
        <view class="item-description">{{ travelPlan.mode_of_transportation }}</view>
      </view>
      <view class="result-item">
        <view class="item-title">主要活动</view>
        <view class="item-description">{{ travelPlan.main_activity }}</view>
      </view>
      <view class="result-item">
        <view class="item-title">同行人数</view>
        <view class="item-description">{{ travelPlan.number_of_people }} 人</view>
      </view>
      <view class="result-item">
        <view class="item-title">每日行程</view>
        <view v-for="(itinerary, index) in travelPlan.daily_itineraries" :key="index" class="itinerary-item">
          <view class="itinerary-day">{{ itinerary.day }}</view>
          <view class="itinerary-section">
            <view class="section-title">上午活动</view>
            <view class="section-description">{{ itinerary.morning_activity }}</view>
          </view>
          <view class="itinerary-section">
            <view class="section-title">下午活动</view>
            <view class="section-description">{{ itinerary.afternoon_activity }}</view>
          </view>
          <view class="itinerary-section">
            <view class="section-title">晚上活动</view>
            <view class="section-description">{{ itinerary.evening_activity }}</view>
          </view>
        </view>
      </view>
      <view class="result-item">
        <view class="item-title">行程建议</view>
        <view class="item-description">{{ travelPlan.suggestion }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      travelPlan: {}
    };
  },
  onLoad(options) {
    const data = options.data;
    if (data) {
      try {
        const parsedData = JSON.parse(data);
        if (parsedData.data && parsedData.data.travel_plan) {
          this.travelPlan = parsedData.data.travel_plan;
          this.travelPlan.name = parsedData.name; // 添加行程名称
        }
      } catch (error) {
        console.error('解析数据失败:', error);
      }
    }
  },
  methods: {
    goBack() {
      uni.reLaunch({
        url: '/pages/itinerary/Itinerary'
      });
    }
  }
};
</script>

<style>
.result-container {
  padding: 2rem;
  background-color: #f9fafb;
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}

.back-btn {
  margin: 0.75rem;
  margin-right: 0;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.back-btn:hover {
  transform: scale(1.1);
}

.result-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-left: 1rem;
  color: #1f2937;
}

.result-content {
  background-color: #ffffff;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease;
}

.result-content:hover {
  transform: translateY(-0.25rem);
}

.result-item {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.item-title {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: #1f2937;
}

.item-description {
  color: #6b7280;
}

.itinerary-item {
  margin-top: 0.75rem;
}

.itinerary-day {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: #1f2937;
}

.itinerary-section {
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: 0.75rem;
  font-weight: 500;
  margin-bottom: 0.375rem;
  color: #1f2937;
}

.section-description {
  color: #6b7280;
}
</style>    